<template>
  <div class="myContainer">
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <el-tabs type="card">
          <el-tab-pane label="基础信息">
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                整改单号 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="整改单号" v-model="list.rectify_no" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                任务状态 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务状态" v-model="status" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                主任务单号 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="主任务单号"  v-model="list.task_no" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                是否逾期 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="是否逾期"  v-model="is_overdue" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                整改小区 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="整改小区"  v-model="list.area_name" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                考核类型 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="考核类型"  v-model="list.type_name" :readonly="readonly"></el-input>
              </el-col>
            </el-row> 
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                标准代码 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="标准代码"  v-model="list.st_no" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                责任人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="责任人"  v-model="list.charger_name" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话"  v-model="list.charger_phone" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                处理人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="处理人"  v-model="list.dealer_name" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话"  v-model="list.dealer_phone" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                审核人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="审核人"  v-model="list.follower_name" :readonly="readonly"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话"  v-model="list.follower_phone" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                生成时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="生成时间"  v-model="list.gen_time" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                截止时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="截止时间"  v-model="list.end_time" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                提交时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="提交时间"  v-model="list.commit_timev" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="6" :offset="3">
                <el-button type="primary" class="myBgGreen" v-if="flag=='back'" @click="onBack">返 回</el-button>
                <el-button type="primary" class="myBgGreen" v-else @click="onClose">关 闭</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="整改详细">

            <el-row class="myBorderBottom myMarginBottom_10px">
              <el-col :span="7" class="myTitleText">考核标准及整改原因</el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                整改标准代码 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="整改标准代码" v-model="list.st_no" :readonly="readonly"></el-input>
              </el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                考核内容 :
              </el-col>
              <el-col :span="12">
                <el-input placeholder="考核内容" type="textarea" v-model="list.st_content" :readonly="readonly"></el-input>
              </el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                考核标准 :
              </el-col>
              <el-col :span="12">
                <el-input placeholder="考核标准" type="textarea" v-model="list.st_info" :readonly="readonly"></el-input>
              </el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                详细地址 :
              </el-col>
              <el-col :span="12">
                <el-input placeholder="详细地址" type="textarea" v-model="list.rectify_address" :readonly="readonly"></el-input>
              </el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                整改原因 :
              </el-col>
              <el-col :span="12">
                <el-input placeholder="整改原因" type="textarea" v-model="list.rectify_reason" :readonly="readonly"></el-input>
              </el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                现场图片 :
              </el-col>
              <el-col :span="20" v-if="list.img_before!='' && list.img_before!=undefined">
                <img :src=x width="200" v-for="x in list.img_before.split(',')" style="margin-right: 10px;"/>
              </el-col>
            </el-row>

            <el-row class="myBorderBottom myMarginBottom_10px">
              <el-col :span="7" class="myTitleText">整改情况</el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                整改措施 :
              </el-col>
              <el-col :span="12">
                <el-input placeholder="整改措施" type="textarea" v-model="list.rectify_measure" :readonly="readonly"></el-input>
              </el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                整改后图片 :
              </el-col>
              <el-col :span="20" v-if="list.img_after!='' && list.img_after!=undefined">
                <img :src=x width="200" v-for="x in list.img_after.split(',')" style="margin-right: 10px;"/>
              </el-col>
            </el-row>

            <el-row class="myBorderBottom myMarginBottom_10px">
              <el-col :span="7" class="myTitleText">审核情况</el-col>
            </el-row>
            
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                审核结论 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="审核结论" v-model="review_note" :readonly="readonly"></el-input>
              </el-col>
            </el-row>

            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                现场照片 :
              </el-col>
              <el-col :span="20" v-if="list.review_img!='' && list.review_img!=undefined">
                <img :src=x width="200" v-for="x in list.review_img.split(',')" style="margin-right: 10px;"/>
              </el-col>
            </el-row>
            
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                文字说明 :
              </el-col>
              <el-col :span="12">
                <el-input placeholder="文字说明" type="textarea" v-model="list.review_info" :readonly="readonly"></el-input>
              </el-col>
            </el-row>
  
            <el-row class="myPaddingBottom_10px">
              <el-col :span="6" :offset="3">
                <el-button type="primary" class="myBgGreen" v-if="flag=='back'" @click="onBack">返 回</el-button>
                <el-button type="primary" class="myBgGreen" v-else @click="onClose">关 闭</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row> 
  </div> 
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myDialogSearchText{
    width: 360px;
  }  
  .myPaddingTop_10px{
    padding-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }   
  .myBorderBottom{
    border-bottom:1px dotted #dbdbdb;
    padding-bottom: 5px;
  } 
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
</style>

<script>
  import { infoRectifyDetailMainTask } from '@/api/quality'; 
  export default {
    data(){
      return{
        title:"任务详细", 
        tableData:[], 
        list:[],
        loading:false,
        readonly:true, 
        standardSelected:"",
        standard:[
          {label:"已执行考核标准",value:"1"}
        ],
        resultSelected:"",
        result:[
          {label:"合格",value:"1"},
          {label:"不合格",value:"2"},
          {label:"未考察",value:"3"}
        ],
        kw:"",
        id:"",
        type:"",
        flag:"",
        status:"",
        is_overdue:"",
        taskid:"",
        review_note:""
      }
    },
    components: {
        
    },
    filters:{
      
    },
    created(){
      this.id = this.$route.query.id;
      this.type=this.$route.query.type;
      this.flag=this.$route.query.flag;
      this.taskid=this.$route.query.taskid;
      if(this.type=="info"){
        this.oninfoRectifyDetailMainTask();
      }
    },
    mounted(){
      document.title = this.title;
      
    },
    methods:{   
      onClose(){
        this.$router.go(-1);
      },
      onBack(){
        this.$router.push({
          path:"supervisoryTaskComonents",
          query:{
            flag:"second",
            id:this.taskid,
            type:"info",
          }
        })
      },
      oninfoRectifyDetailMainTask(){
        let vm=this;
        infoRectifyDetailMainTask(vm.id).then(response => {
          let res=response.data;
          vm.list=res;
          vm.status=vm.onstatus(res.status);
          vm.is_overdue=vm.overdue(res.is_overdue);
          vm.review_note=vm.review_noteText(res.review_note);
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onstatus(val){
        let type={ 
          "1":"待整改",
          "2":"待审核",
          "3":"已完成",
        }
        return type[val];
      },
      overdue(val){
        let type={ 
          "0":"逾期",
          "1":"未逾期", 
        }
        return type[val];
      },
      review_noteText(val){
        let type={ 
          "-1":"未审核",
          "0":"通过",
          "1":"不通过", 
        }
        return type[val];
      }

    }
    
  }   


</script>



